<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>子向父通讯，依赖父中的方法</title>

</head>
<body>

    <div id="app">
        当前年龄为:{{age}}

<!--        父向子传递了两个方法的引用，分别为jia--》increment，jian-->
        <heima @increment="increment" @decrement="decrement"></heima>
    </div>


<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    //局部组件在声明时并不知道自己是个组件,注册完成之后才知道
    var heima = {
        template:`
            <div>
        <button @click="increment">点我变大</button>
        <button @click="decrement">点我变小</button>
</div>
        `,
        methods:{
            increment() {
                //把子中的方法和父中的方法 关联
                this.$emit("increment");
            },
            decrement(){
                this.$emit("decrement");
            }
        }
    }

    //局部组件使用时必须进行注册
    var app = new Vue({
        el: "#app",
        components:{
            heima
        },
        data:{
            age:18
        },
        methods: {
            increment(){
                this.age++
            },
            decrement(){
                this.age--
            }
        }
    });
</script>


</body>
</html>